<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>天气预报</title>
    <style>
        .container {
            width: 1000px;
            margin: 0 auto;
        }
        ul::after {
            display: table;
            content: "";
            clear: both;
        }
        ul{
            padding: 0;
        }
        .list li,.date li{
            float: left;
            width: 130px;
            height: 260px;
            list-style: none;
            padding: 5px;
            color: #fff;
            text-align: center;
            border: 1px solid #ccc;
            background: -webkit-gradient(linear, 0% 0, 0% 100%, from(#50b2fb), to(#a6d4f6));
        }
        .list li div{
            padding-bottom: 15px;
        }
        .date li{
           height: 200px;
        }
        .date li div{
            padding-bottom: 25px;
        }
        .sug li{
            float: left;
            list-style: none;
            background: none;
        }
        .sug li>div{
            float: left;
            width: 245px;
            height: 90px;
            border: 1px solid #ccc;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" id="ipt" placeholder="请在此输入城市">
        <h3>一周天气</h3>
        <ul class="list">
            <li>
                <div id="date"></div>
                <div>天气：<span id="now"></span></div>
                <div class="tubiao"><img src="img/sunny.png" alt=""></div>
                <div>最高温度：<span id="wea-max"></span>℃</div>
                <div>最低温度：<span id="wea-min"></span>℃</div>
                <div>风向：<span id="wind"></span></div>
                <div>风力等级：<span id="ji"></span>级</div>
            </li>
            <li>
                <div id="date1"></div>
                <div>天气：<span id="now1"></span></div>
                <div class="tubiao"><img src="img/sunny.png" alt=""></div>
                <div>最高温度：<span id="wea-max1"></span>℃</div>
                <div>最低温度：<span id="wea-min1"></span>℃</div>
                <div>风向：<span id="wind1"></span></div>
                <div>风力等级：<span id="ji1"></span>级</div>
                <!-- <div>穿衣指数：<span id="drsg1"></span></div> -->
            </li>
            <li>
                <div id="date2"></div>
                <div>天气：<span id="now2"></span></div>
                <div class="tubiao"><img src="img/cloudy.png" alt=""></div>
                <div>最高温度：<span id="wea-max2"></span>℃</div>
                <div>最低温度：<span id="wea-min2"></span>℃</div>
                <div>风向：<span id="wind2"></span></div>
                <div>风力等级：<span id="ji2"></span>级</div>
            </li>
            <li>
                <div id="date3"></div>
                <div>天气：<span id="now3"></span></div>
                <div class="tubiao"><img src="img/cloudy.png" alt=""></div>
                <div>最高温度：<span id="wea-max3"></span>℃</div>
                <div>最低温度：<span id="wea-min3"></span>℃</div>
                <div>风向：<span id="wind3"></span></div>
                <div>风力等级：<span id="ji3"></span>级</div>
            </li>
            <li>
                <div id="date4"></div>
                <div>天气：<span id="now4"></span></div>
                <div class="tubiao"><img src="img/cloudy.png" alt=""></div>
                <div>最高温度：<span id="wea-max4"></span>℃</div>
                <div>最低温度：<span id="wea-min4"></span>℃</div>
                <div>风向：<span id="wind4"></span></div>
                <div>风力等级：<span id="ji4"></span>级</div>
            </li>
            <li>
                <div id="date5"></div>
                <div>天气：<span id="now5"></span></div>
                <div class="tubiao"><img src="img/sunny.png" alt=""></div>
                <div>最高温度：<span id="wea-max5"></span>℃</div>
                <div>最低温度：<span id="wea-min5"></span>℃</div>
                <div>风向：<span id="wind5"></span></div>
                <div>风力等级：<span id="ji5"></span>级</div>
            </li>
            <li>
                <div id="date6"></div>
                <div>天气：<span id="now6"></span></div>
                <div class="tubiao"><img src="img/sunny.png" alt=""></div>
                <div>最高温度：<span id="wea-max6"></span>℃</div>
                <div>最低温度：<span id="wea-min6"></span>℃</div>
                <div>风向：<span id="wind6"></span></div>
                <div>风力等级：<span id="ji6"></span>级</div>
            </li>
        </ul>
        <h3>分时段预报</h3>
        <ul class="date">
            <li>
                <div id="time"></div>
                <div>温度：<span id="tmp"></span></div>
                <div>风向：<span id="windd"></span></div>
                <div>风力等级：<span id="dji"></span>级</div>
            </li>
            <li>
                <div id="time1"></div>
                <div>温度：<span id="tmp1"></span></div>
                <div>风向：<span id="windd1"></span></div>
                <div>风力等级：<span id="dji1"></span>级</div>
            </li>
            <li>
                <div id="time2"></div>
                <div>温度：<span id="tmp2"></span></div>
                <div>风向：<span id="windd2"></span></div>
                <div>风力等级：<span id="dji2"></span>级</div>
            </li>
            <li>
                <div id="time3"></div>
                <div>温度：<span id="tmp3"></span></div>
                <div>风向：<span id="windd3"></span></div>
                <div>风力等级：<span id="dji3"></span>级</div>
            </li>
            <li>
                <div id="time4"></div>
                <div>温度：<span id="tmp4"></span></div>
                <div>风向：<span id="windd4"></span></div>
                <div>风力等级：<span id="dji4"></span>级</div>
            </li>
            <li>
                <div id="time5"></div>
                <div>温度：<span id="tmp5"></span></div>
                <div>风向：<span id="windd5"></span></div>
                <div>风力等级：<span id="dji5"></span>级</div>
            </li>
            <li>
                <div id="time6"></div>
                <div>温度：<span id="tmp6"></span></div>
                <div>风向：<span id="windd6"></span></div>
                <div>风力等级：<span id="dji6"></span>级</div>
            </li>
        </ul>
        <h3>生活指数</h3>
        <ul class="sug">
            <li>
               <div>
                   <div>紫外线指数：<span id="uv"></span><br>
                    <span id="uv1"></span>
                    </div>
               </div>
               <div>旅游指数：<span id="trav"></span><br>
                    <span id="trav1"></span>
               </div>
               <div>运动指数：<span id="sport"></span><br>
                <span id="sport1"></span>
               </div>
            </li>
            <li>
                <div>穿衣指数：<span id="drsg"></span><br>
                    <span id="drsg1"></span>
                </div>
                <div>感冒指数：<span id="flu"></span><br>
                    <span id="flu1"></span>
                </div>
                <div>洗车指数：<span id="cw"></span><br>
                    <span id="cw1"></span>
                </div>
            </li>
        </ul>
    </div>


    <script src="script.js"></script>
</body>

</html>